<template>
  <view class="u-p-l-10 u-p-r-10">

    <u-navbar :is-back="true">
      <view style="display: flex;justify-content: center;align-items: center;">
        <!-- #ifdef MP-WEIXIN -->
        <u-search placeholder="你想搜什么设备" v-model="keyword" input-align="center" :show-action="false" :clearabled="true"
                  :disabled="true" style="width: 380rpx;" @click="search"></u-search>
        <!-- #endif -->
        <!-- #ifndef MP-WEIXIN -->
        <u-search placeholder="你想搜什么设备" v-model="keyword" input-align="center" :show-action="false" :clearabled="true"
                  :disabled="true" style="width: 580rpx;" @click="search"></u-search>
        <!-- #endif -->
      </view>
    </u-navbar>
    <view>
      <view class="rowClass">
        <u-row>
          <u-col span="3" text-align="center" v-for="(item,index) in navList" :key="index">
            <view class="u-padding-20" @tap="clickNav(item)" hover-class="hoverClass">
              <image :src="item.src" style="width: 90rpx;height: 90rpx;" mode="widthFix"></image>
              <view class="tabName">{{ item.name }}</view>
            </view>
          </u-col>
        </u-row>
      </view>
      <u-gap height="10"></u-gap>
      <view @click="notice">
        <u-notice-bar mode="vertical" :list="noticeList" type="primary" more-icon
                      bg-color="#fff" :duration="5000" border-radius="15"></u-notice-bar>
      </view>
      <u-gap height="5"></u-gap>
      <view class="order">
        <u-card  v-for="(item, index) in dataList" :key="index"  :title="getTitle(item)">
          <view class="" slot="body">
            <view class="u-body-item u-flex u-row-between u-p-b-0">
			<image src="https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg" mode="aspectFill"></image>
			      {{item.useTo}} | {{item.useDescription}}|{{item.description}}
             </view>

            <view class="u-body-item u-flex u-row-between u-p-b-0">
              {{item.beginTime}}-{{item.endTime}}
            </view>
          </view>
          <view class="" slot="foot">
            <u-button size="mini">{{item.managerPhone}}</u-button>
            <u-button size="mini">{{item.driverName}}</u-button>
          </view>
        </u-card>
      </view>

    </view>
    <u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="getDataList"
                style="height: 80rpx;line-height: 80rpx;"></u-loadmore>
    <u-back-top :scroll-top="scrollTop" top="1000"></u-back-top>
    <u-no-network></u-no-network>
    <view class="buttom">
      <view class="loginType">
        <view class="wechat item">
          <view class="icon">
            <u-icon size="60" name="server-man" color="#999" @click="server"></u-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      pageNum: 1,
      pageSize: 5,
      scrollTop: 0,
      houseList: [],
      swiperList: [
        {
          image: '/static/img/index/swiper/swiper2.png',
          title: '身无彩凤双飞翼，心有灵犀一点通'
        },
        {
          image: '/static/img/index/swiper/swiper.jpg',
          title: '身无彩凤双飞翼，心有灵犀一点通'
        },
      ],
      noticeList: [],
      navList: [
        {name: "运输资源", src: "/static/img/index/cover_2022/index_cover1.png", type: "0"},
        {name: "工程资源", src: "/static/img/index/cover_2022/index_cover2.png", type: "1"},
        {name: "避坑指南", src: "/static/img/index/cover_2022/index_cover3.png", url: "/pages/center/tips"},
        {name: "我要发布", src: "/static/img/index/cover_2022/index_cover4.png", type: "2"}
      ],
      loadStatus: 'loadmore',
      dataList: [],
      uvCode: uni.getStorageSync('uvCode')
    }
  },
  onLoad() {
    // 检查是否已选择城市，如果未选择，跳转到选择城市页面
    this.checkCity();
    // 获取数据
    this.getDataList();
    this.getNoticecList();
    // 流量统计
    this.appSysFlowInfo();
    uni.$on('findIndexHouseList', (obj) => {
      // 获取数据
      this.getDataList(1);
    })
  },
  onUnload() {
    // 移除监听事件
    uni.$off('findIndexHouseList');
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  onReachBottom() {
    this.loadStatus = 'loading';
    // 获取数据
    this.getDataList()
  },
  // 下拉刷新
  onPullDownRefresh() {
    // 获取数据
    this.getDataList(1);
    // 关闭刷新
    uni.stopPullDownRefresh();
  },
  methods: {
    getTitle(item) {
      return item.beginAddress+">"+item.endAddress+">"+item.distance;
    },
    checkCity() {
      // 检查是否已选择城市，如果未选择，跳转到选择城市页面
      let lifeData = uni.getStorageSync('lifeData');
      let vuex_city = lifeData.vuex_city
      // console.log(vuex_city.length);
      if (!vuex_city || vuex_city.length == 0) {
        // 没有token 则跳转到登录
        return this.$u.route('/pages/location/location');
      }
    },
    location() {
      this.$u.route({
        url: 'pages/location/location',
      })
    },
    search() {
      this.$u.route({
        url: 'pages/vehicle/search',
      })
    },
    notice() {
      this.$u.route({
        url: 'pages/notice/notice'
      })
    },
    getDataList(type = 0) {
      if (type == 1) {
        this.pageNum = 1
        this.dataList = []
        this.$refs.uWaterfall.clear();
      }
      let url = "/car/assigns";
      this.$u.get(url, {
        number: this.pageNum,
        size: this.pageSize,
        category: 'GENERAL',
        orderByColumn: 'update_time,create_time',
        isAsc: 'desc'
      }).then(result => {
        const data = result.rows;
        if (this.pageNum > 1 && data.length < this.pageSize) {
          return this.loadStatus = 'nomore';
        }
        this.dataList=data;
        ++this.pageNum
        this.loadStatus = 'loadmore';
      });
    },
    clickSearch() {
      this.$u.route('/pages/search/search');
    },
    async getHttpUrl(id) {
      let url = "/pa/resources/resourceId/" + id + "/resourceType/vehicle/thumbnail";
      const response = await this.$u.get(url);
      if (response.data) {
        return response.data.httpUrl;
      }
      return null;
    },
    clickImage(id) {
      this.$u.route({
        url: '/pages/vehicle/detail',
        params: {
          id: id
        }
      })
    },
    clickNav(item) {
      if (item.url) {
        return this.$u.route(item.url);
      }
      if (item.type === "2") {
        // 判断是否有token
        let lifeData = uni.getStorageSync('lifeData');
        let token = lifeData.vuex_token
        if (!token) {
          // 没有token 则跳转到登录
          return uni.reLaunch({
            url: '../login/login'
          })
        } else {
          // 判断Token是否有效
          let url = "/api/profile/isExpiration";
          return this.$u.get(url, {
            token: token
          }).then(obj => {
            if (obj.data) {
              // 没有token过期则跳转到登录
              return uni.reLaunch({
                url: '../login/login'
              })
            } else {
              return this.$u.route('/pages/offer/add');
            }
          });
        }
      } else if (item.type) {
        // return this.$u.route('/pages/search/searchList');
        return this.$u.route({
          url: '/pages/vehicle/searchList',
          params: {
            type: item.type
          }
        })
      }
    },
    code() {
      this.$mytip.toast('请咨询作者')
    },
    appSysFlowInfo() {
      // 流量统计
      let uvCode = uni.getStorageSync("uvCode");
      let url = "/api/flow/upFlow?type=MINI&uvCode=" + uvCode;
      uni.request({
        url: url,
        method: "POST",
        success: (res) => {
          uni.setStorageSync("uvCode", res.data.data);
        },
      });
    },
    server() {
      // window.open ('https://sourcebyte.cn')
      uni.makePhoneCall({
        phoneNumber: "19934353238",
      });
    },
    getNoticecList() {
      let url = "/api/notice/findNoticeList";
      this.$u.get(url, {
        pageNum: 1,
        pageSize: 50,
        orderByColumn: 'create_time',
        isAsc: 'desc'
      }).then(obj => {
        let data = obj.rows
        data.filter(item => {
          this.noticeList.push(item.noticeTitle)
        })
      });
    },
    moreInfo() {
      uni.navigateToMiniProgram({
        appId: 'wxbca64173e772915e',// 此为开源字节appid
        path: '/pages/index/index',// 此为开源字节首页路径
        envVersion: "release",
        success: res => {
          // 打开成功
          console.log("打开成功", res);
        },
        fail: err => {
          console.log(err);
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.nomore {
  background-color: $u-bg-color;
}

.search {
  width: 54px;
  height: 44px;

  &:active {
    background-color: $u-bg-color;
  }
}

.rowClass {
  border-radius: 8px;
  background-color: rgb(255, 255, 255);
  margin-top: 10 rpx;
}

.hoverClass {
  background-color: #E4E7ED;
}

.tabName {
  font-size: 28 rpx;
  color: $u-main-color;
}

.demo-warter {
  border-radius: 8px;
  margin-top: 3px;
  background-color: #ffffff;
  padding: 3px;
  position: relative;
}

.u-close {
  position: absolute;
  top: 20 rpx;
  right: 20 rpx;
}

.item-cover {
  font-size: 55 rpx;
  color: $u-type-warning;
}

.item-title {
  font-size: 28 rpx;
  color: $u-main-color;
  font-weight: bold;
  padding-top: 5 rpx;
  padding-left: 10 rpx;
}

.item-price {
  font-weight: normal;
  font-size: 32 rpx;
  color: $u-type-warning;
}

.item-desc {
  font-weight: normal;
  font-size: 26 rpx;
  color: $u-tips-color;
  padding-bottom: 5 rpx;
  padding-left: 10 rpx;
}

.item-tag {
  font-size: 24 rpx;
  color: $u-tips-color;
  margin-top: 3px;
}

.buttom {
  .loginType {
    font-size: 14px;
    position: fixed;
    right: 30 rpx;
    bottom: 300 rpx;
    width: 60px;
    height: 60px;
    padding: 4px;
    cursor: pointer;
    background: #FFF;
    text-align: center;
    line-height: 60px;
    border-radius: 100%;
    -webkit-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
  }
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  .empty {
    overflow: hidden;

    .tip {
      color: #909399;
    }

    .btn {
      color: #fff;
      background-color: #2979ff;
      width: 200 rpx;
      padding: 15 rpx 28 rpx;
      border-radius: 130 rpx;
      margin: 30 rpx 0 0 100 rpx;
    }
  }
}

.order {
  width: 710 rpx;
  background-color: #ffffff;
  margin: 20 rpx auto;
  border-radius: 20 rpx;
  box-sizing: border-box;
  padding: 20 rpx;
  font-size: 28 rpx;

  .top {
    display: flex;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;

      .store {
        // margin: 0 10rpx;
        font-size: 32 rpx;
      }
    }

    .right {
      color: #2979ff;
    }
  }

  .item {
    display: flex;
    margin: 20 rpx 0 0 0;

    .left {
      margin-right: 30 rpx;

      image {
        width: 150 rpx;
        height: 150 rpx;
        border-radius: 10 rpx;
      }
    }

    .content {
      .title {
        font-weight: bold;
        font-size: 28 rpx;
        line-height: 50 rpx;
      }

      .price {
        margin: 10 rpx 0;
        font-size: 30 rpx;
      }

      .type {
        margin: 10 rpx 0;
        font-size: 24 rpx;
        color: $u-tips-color;
      }

      .desc {
        margin: 10 rpx 0;
        font-size: 24 rpx;
        color: $u-tips-color;
      }
    }
  }

  .bottom {
    display: flex;
    margin-top: 20 rpx;
    padding: 0 10 rpx;
    justify-content: flex-end;
    align-items: center;

    .btn {
      margin-left: 20 rpx;
      line-height: 52 rpx;
      width: 160 rpx;
      border-radius: 26 rpx;
      border: 2 rpx solid $u-border-color;
      font-size: 26 rpx;
      text-align: center;
      color: $u-type-info-dark;
    }

    .evaluate {
      // color: #2979ff;
      // border-color: #2979ff;
      color: $u-tips-color;
      border-color: $u-tips-color;
    }
  }
}

.centre {
  text-align: center;
  margin: 200 rpx auto;
  font-size: 32 rpx;

  image {
    width: 164 rpx;
    height: 164 rpx;
    border-radius: 50%;
    margin-bottom: 20 rpx;
  }

  .tips {
    font-size: 24 rpx;
    color: #999999;
    margin-top: 20 rpx;
  }

  .btn {
    margin: 80 rpx auto;
    width: 200 rpx;
    border-radius: 32 rpx;
    line-height: 64 rpx;
    color: #ffffff;
    font-size: 26 rpx;
    background-image: linear-gradient(to left, #2979ff, rgba(#2979ff, 0.6));
  }
}

.wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
}

.swiper-box {
  flex: 1;
}

.swiper-item {
  height: 100%;
}

.buttom {
  .loginType {
    font-size: 14px;
    position: fixed;
    right: 30 rpx;
    bottom: 120 rpx;
    width: 60px;
    height: 60px;
    padding: 4px;
    cursor: pointer;
    background: #FFF;
    text-align: center;
    line-height: 60px;
    border-radius: 100%;
    -webkit-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
  }
}

.u-card-wrap {
  background-color: $u-bg-color;
  padding: 1px;
}

.u-body-item {
  font-size: 32rpx;
  color: #333;
  padding: 20rpx 10rpx;
}

.u-body-item image {
  width: 120rpx;
  flex: 0 0 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-left: 12rpx;
}
</style>
